<template>
    <div>
        <h2>机构列表</h2>
        <div>
        <span>机构名称:</span>
        <input type="text" v-model="model.JiGouName" >
        
        <span>机构特色:</span>
            <select v-model="model.TeSe">
              <option  :value="-1">请选择</option>
              <option  value="24小时服务">24小时服务</option>
              <option  value="免费停车">免费停车</option>
              <option  value="免费护理">免费护理</option>
              <option  value="免费早餐">免费早餐</option>
              </select>
              <input type="button" value="查询" class="btn  btn-success" @click="GetList">
        </div>
        <table class="table">
    <tbody>
        <tr class="bg-primary">
            <td>机构名称</td>
            <td>机构特色</td>
            <td>时间</td>
            <td>地址</td>
            <td>联系电话</td>
            <td>是否发布</td>
            <td>机构详情</td>
            <td>操作</td>
        </tr>



        <tr v-for="item  in data.list" :key="item.Id">
            <td>{{item.JiGouName}}</td>
            <td>{{item.TeSe}}</td>
            <td>{{item.CreateTime.substring(0,10)}}</td>
            <td>{{item.Adder}}</td>
            <td>{{item.Phone}}</td>
            <td>{{item.State?"是" :"否"}}</td>
            <td>{{item.XiangQing}}</td>
            <td>
                <input type="button" value="删除" class="btn  btn-danger" @click="jigoudel(item.Id)">
                <input type="button" value="编辑" class="btn  btn-success" @click="jigouupd(item.Id)">
                <input type="button" value="否"  v-if="item.State==1"  class="btn  btn-info" @click="jigoustate(item.Id,item.State)">
                <input type="button" value="是"  v-if="item.State==0"  class="btn  btn-info" @click="jigoustate(item.Id,item.State)">
            </td>
        </tr>
    </tbody>
</table>
<span>总条:{{data.count}}数</span>
 <span>每页:{{model.size}}条</span>
 <span>当前:{{model.index+'/'+data.page}}条</span>
<div>
    <input type="button" value="首页" class="btn  btn-info" @click="gopage('a')">
    <input type="button" value="上一页" class="btn  btn-info" @click="gopage('b')">
    <input type="button" value="下一页" class="btn  btn-info" @click="gopage('c')">
    <input type="button" value="尾页" class="btn  btn-info" @click="gopage('d')">
</div>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive, onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
const route=useRoute();
const router=useRouter();


//定义变量
let model=reactive({
    JiGouName:'',
    TeSe:'-1',
    index:1,
    size:3,
})


//定义分页变量
let data=reactive({
list:[],
count:0,
page:0,
})


onMounted(()=>{
GetList();
})


//显示
const GetList=()=>{

axios({
url:'https://localhost:7009/api/User/JiGouList',
method:'get',
params:model,
})

.then((res)=>{
console.log(res);
data.list=res.data.list;
data.count=res.data.count;
data.page=res.data.page;
})

.catch((ree)=>{
console.log(ree);
})


}

//修改跳转
const jigouupd=(Id:any)=>{
router.push({
path:'/JiGouUpd',
query:{
    Id:Id,
}

})

}




//定义分页
const gopage=(str:any)=>{

switch(str){


case'a':
if(model.index==1){
return;
}
model.index=1
break;


case'b':
if(model.index==1){
return;
}
model.index--;
break;




case'c':
if(model.index==data.page){
return;
}
model.index++;
break;


case'd':
if(model.index==data.page){
return;
}
model.index=data.page
break;
}
GetList();

}


//删除
const jigoudel=(Id:any)=>{

var f=(confirm('确定要删除吗?'))

if(f){


axios({
url:'https://localhost:7009/api/User/JiGouDel',
method:'delete',
params:{
    Id:Id,
},
})

.then((res)=>{
console.log(res);

if(res.data>0){
    alert('删除成功');
    GetList();
    return;
}

else{
    alert('删除失败');
    return;
}

})

.catch((ree)=>{
console.log(ree);
})


}


}


//修改状态
const jigoustate=(Id:any,State:any)=>{

if(State==1){
    State=0;
}

else{
    State=1;
}

axios({
url:'https://localhost:7009/api/User/JiGouState',
method:'put',
params:{
    Id:Id,
    State:State,
},
})

.then((res)=>{
console.log(res);

if(res.data>0){
    alert('修改成功');
    GetList();
    return;
}

else{
    alert('修改失败');
    return;
}

})

.catch((ree)=>{
console.log(ree);
})





}




</script>

<style scoped>

</style>